{extend name="index/iframe" /}

{block name="content"}
<form class="layui-form layui-form-my" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="rolename" value="{$find.rolename}" lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限列表</label>
        <div class="layui-input-block">
            <div style="padding-top: 5px;">
                {volist name="$pri_list" id="vo"}

                <span class="check_box" level="{$vo.level}" id="{$vo.id}" pid="{$vo.pid}" check='{in name="$vo.id" value="$find.pri_id_list_new"}true{else/}false{/in}' title="{$vo.pri_name}">{$vo.pri_name} <i class="layui-icon">&#xe618;</i></span>

                {volist name="$vo.child" id="voo"}
                <hr>
                <span class="check_box" level="{$voo.level}" id="{$voo.id}" pid="{$voo.pid}" check='{in name="$voo.id" value="$find.pri_id_list_new"}true{else/}false{/in}' title="{$voo.pri_name}">{$voo.pri_name} <i class="layui-icon">&#xe618;</i></span>

                {notempty name="$voo.child"}
                {volist name="$voo.child" id="vooo"}
                <hr>
                <span class="check_box" level="{$vooo.level}" id="{$vooo.id}" pid="{$vooo.pid}" check='{in name="$vooo.id" value="$find.pri_id_list_new"}true{else/}false{/in}' title="{$vooo.pri_name}">{$vooo.pri_name} <i class="layui-icon">&#xe618;</i></span>
                {notempty name="$vooo.child"}

                {volist name="$vooo.child" id="voooo"}
                {eq name="$vooo.rid" value="1"}
                <hr class="layui-bg-white rid">
                {/eq}

                <span class="check_box" level="{$voooo.level}" id="{$voooo.id}" pid="{$voooo.pid}" check='{in name="$voooo.id" value="$find.pri_id_list_new"}true{else/}false{/in}' title="{$voooo.pri_name}">{$voooo.pri_name} <i class="layui-icon">&#xe618;</i></span>
                {notempty name="$voooo.child"}
                {volist name="$voooo.child" id="vooooo"}
                <span class="check_box" level="{$vooooo.level}" id="{$vooooo.id}" pid="{$vooooo.pid}" check='{in name="$vooooo.id" value="$find.pri_id_list_new"}true{else/}false{/in}' title="{$vooooo.pri_name}">{$vooooo.pri_name} <i class="layui-icon">&#xe618;</i></span>
                {/volist}
                {/notempty}
                {/volist}

                {/notempty}
                {/volist}
                {/notempty}

                {/volist}
                {/volist}
            </div>
        </div>
    </div>
    <hr>
    <div class="layui-form-item" style="margin: 50px 0 100px 0;">
        <div class="layui-input-block">
            <button class="layui-btn my-btn" lay-submit="" lay-filter="submitBtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}

{block name="css"}
<style>
    span[level="2"] {margin-left: 40px;}
    .rid + span {margin-left: 80px;}
    .check_box {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background: #eee; color: #666; padding: 7px 10px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; display:inline-block; font-size: 13px;}
    .layui-icon {visibility: hidden;}
    .check_box[check="true"] {"background-color":"#5FB878";"color":"#fff";"border-color":"#5FB878";}
    /*.check_box[check="false"] {"background-color":"#5FB878";"color":"#fff";"border-color":"#5FB878";}*/
</style>
{/block}

{block name="js"}
<script>
    layui.use(['form', 'layedit', 'laydate', 'upload', 'element'], function(){
        var form = layui.form
            ,$ = layui.$
            ,layer = layui.layer;

        $('.check_box').each(function(){
            if($(this).attr('check') == 'true'){
                $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                $(this).find('.layui-icon').css("visibility","visible");
                $(this).attr('check', 'true');
            }
        });


        $('body').on('click', '.check_box', function(){
            var id = $(this).attr('id')
                ,pid = $(this).attr('pid');
            if( $(this).attr('check') == 'false' ){
                $('.check_box').each(function(){
                    //自身
                    if( $(this).attr('id') == id ){
                        $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                        $(this).find('.layui-icon').css("visibility","visible");
                        $(this).attr('check', 'true');
                    }
                    //向下遍历
                    if( $(this).attr('pid') == id ){
                        $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                        $(this).find('.layui-icon').css("visibility","visible");
                        $(this).attr('check', 'true');

                        var id1 = $(this).attr('id');
                        $('.check_box').each(function(){
                            if( $(this).attr('pid') == id1 ){
                                $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                                $(this).find('.layui-icon').css("visibility","visible");
                                $(this).attr('check', 'true');

                                var id2 = $(this).attr('id');
                                $('.check_box').each(function() {
                                    if ($(this).attr('pid') == id2) {
                                        $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                                        $(this).find('.layui-icon').css("visibility","visible");
                                        $(this).attr('check', 'true');

                                        var id3 = $(this).attr('id');
                                        $('.check_box').each(function() {
                                            if ($(this).attr('pid') == id3) {
                                                $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                                                $(this).find('.layui-icon').css("visibility","visible");
                                                $(this).attr('check', 'true');
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }

                    //向上遍历
                    if( $(this).attr('id') == pid ){
                        $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                        $(this).find('.layui-icon').css("visibility","visible");
                        $(this).attr('check', 'true');

                        var pid1 = $(this).attr('pid');
                        $('.check_box').each(function(){
                            if( $(this).attr('id') == pid1 ){
                                $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                                $(this).find('.layui-icon').css("visibility","visible");
                                $(this).attr('check', 'true');

                                var pid2 = $(this).attr('pid');
                                $('.check_box').each(function(){
                                    if( $(this).attr('id') == pid2 ){
                                        $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                                        $(this).find('.layui-icon').css("visibility","visible");
                                        $(this).attr('check', 'true');

                                        var pid3 = $(this).attr('pid');
                                        $('.check_box').each(function(){
                                            if( $(this).attr('id') == pid3 ){
                                                $(this).css({"background-color":"#5FB878","color":"#fff","border-color":"#5FB878"});
                                                $(this).find('.layui-icon').css("visibility","visible");
                                                $(this).attr('check', 'true');
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                })
            }else{
                $('.check_box').each(function(){
                    if( $(this).attr('id') == id ){
                        $(this).css({"background-color":"#eee","color":"#666","border-color":"#ccc"});
                        $(this).find('.layui-icon').css("visibility","hidden");
                        $(this).attr('check', 'false');
                    }

                    if( $(this).attr('pid') == id ){
                        $(this).css({"background-color":"#eee","color":"#666","border-color":"#ccc"});
                        $(this).find('.layui-icon').css("visibility","hidden");
                        $(this).attr('check', 'false');

                        var id1 = $(this).attr('id');
                        $('.check_box').each(function(){
                            if( $(this).attr('pid') == id1 ){
                                $(this).css({"background-color":"#eee","color":"#666","border-color":"#ccc"});
                                $(this).find('.layui-icon').css("visibility","hidden");
                                $(this).attr('check', 'false');

                                var id2 = $(this).attr('id');
                                $('.check_box').each(function() {
                                    if ($(this).attr('pid') == id2) {
                                        $(this).css({"background-color":"#eee","color":"#666","border-color":"#ccc"});
                                        $(this).find('.layui-icon').css("visibility","hidden");
                                        $(this).attr('check', 'false');

                                        var id3 = $(this).attr('id');
                                        $('.check_box').each(function() {
                                            if ($(this).attr('pid') == id3) {
                                                $(this).css({"background-color":"#eee","color":"#666","border-color":"#ccc"});
                                                $(this).find('.layui-icon').css("visibility","hidden");
                                                $(this).attr('check', 'false');
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                })
            }
        })

        //提交
        form.on('submit(submitBtn)', function(data){
            var role_name = data.field.rolename
                ,str = ''
                ,id = {$Think.get.id}
                ,load = layer.load();

            $('.check_box[check="true"]').each(function(){
                str += $(this).attr('id') + ',';
            });

            var pri_id = str.substring(0, str.length-1);
            $.post('{:url("SystemRole/edit")}', {id:id, rolename: role_name, pri_id_list_new: pri_id} , function(json){
                layer.close(load);
                json.code==0 ? layer.msg(json.msg, {icon: 1, time: 1000}) : layer.msg(json.msg, {icon: 0, time: 1000});
            }, 'JSON').error(function(){
                layer.close(load);
                layer.msg('连接超时，请联系后台管理员', {icon: 2, time:3000});
            });
            return false;
        });
    });
</script>
{/block}